<template>
  <el-container class="outer-container">
    <el-header class="header" height="110px">
      <img class="logo" src="../assets/logo.png" />
      <div class="avatar-menu">
        <avatar-menu/>
      </div>
    </el-header>
    <el-container class="inner-container">
      <el-aside class="aside">
        <el-menu :router="true" :default-openeds="openeds" background-color="#f6f6f6">
          <el-submenu index="1" class="el-icon">
            <template slot="title">
              <i class="iconfont icon-xuesheng"></i>
              <span>学生菜单</span>
            </template>
            <el-menu-item index="/student/choice">自主选题</el-menu-item>
            <el-menu-item index="/student/topic">课题管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2" class="el-icon">
            <template slot="title">
              <i class="iconfont icon-jiaoshi2"></i>
              <span>教师菜单</span>
            </template>
            <el-menu-item index="/teacher/topic">课题管理</el-menu-item>
            <el-menu-item index="/teacher/choice">选题管理</el-menu-item>
            <el-menu-item index="/teacher/comment">评阅管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3" class="el-icon">
            <template slot="title">
              <i class="iconfont icon-guanliyuan1"></i>
              <span>管理员菜单</span>
            </template>
            <el-menu-item index="/admin/check">课题审核</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
    <el-footer class="footer" height="80px">
    </el-footer>
  </el-container>
</template>

<script>
import AvatarMenu from './user/AvatarMenu'

export default {
  name: 'home',
  components: {
    AvatarMenu
  },
  data () {
    return {
      openeds: ['1', '2', '3']
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-icon >>> .iconfont {
  margin-right: 5px;
}

.outer-container {
  height: 100%;

  .header {
    background: #f0f0f0;

    .logo {
      height: 100%;
      margin-left: 10px;
      float: left;
    }

    .avatar-menu {
      float: right;
      text-align: right;
      margin-top: 5px;
      margin-right: 30px;
    }
  }

  .inner-container {
    .aside {
      background: #f6f6f6;
    }

    .main {
      background: #f6f6f6;
    }
  }

  .footer {
    background: #ff9167;
  }
}
</style>
